
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/public/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/public/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">
                功能菜单
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div id="resourceTree" class="demo-tree"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6" style="display: none" id="right">
        <div  class="layui-card">
            <div class="layui-card-header">
                编辑菜单项
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="" id="myForm" lay-filter="myForm" style="height: 100%">
                <div class="layui-form-item" id="addId">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="id"  style="width: 300px" id="id" lay-verify="required" autocomplete="off" disabled="disabled" class="layui-input">
                    </div>
                </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">父ID</label>
                <div class="layui-input-block">
                    <input type="text" name="parentId"  style="width: 300px" id="parentId" lay-verify="required" autocomplete="off" disabled="disabled" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="width: 300px;">
                <label class="layui-form-label">层级</label>
                <div class="layui-input-block">
                    <select name="level" lay-verify="required" disabled="disabled">
                        <option value="0" selected>父菜单</option>
                        <option value="1">子菜单</option>
                        <option value="2">功能点</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" style="width: 300px" lay-verify="required" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单样式</label>
                <div class="layui-input-block">
                    <input type="text" name="style" id="style" style="width: 300px" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">同级顺序</label>
                <div class="layui-input-block">
                    <input type="text" name="sequence" id="sequence" style="width: 300px" class="layui-input" lay-verify="number" autocomplete="off" placeholder="请输入同级顺序">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="itemHref" id="itemHref" style="width: 300px" class="layui-input">
                </div>
            </div>

                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <button class="layui-btn #{if !toolsUtils.checkBtn('/item/saveItem') } layui-hide #{/if}" lay-submit="" lay-filter="component-form-demo1">保存</button>
                        <button class="layui-btn layui-btn-warm #{if !toolsUtils.checkBtn('/item/saveItem') } layui-hide #{/if}" lay-submit="" lay-filter="addChildren" id="addChildren"><i class="layui-icon layui-icon-add-circle-fine"></i>添加子节点</button>
                        <button class="layui-btn layui-btn-warm #{if !toolsUtils.checkBtn('/item/saveItem') } layui-hide #{/if}" lay-submit="" lay-filter="addTj" id="addTj"><i class="layui-icon layui-icon-add-circle-fine"></i>添加同级节点</button>
                        <button class="layui-btn layui-btn-danger #{if !toolsUtils.checkBtn('/item/deleteItem') } layui-hide #{/if}" lay-submit="" lay-filter="del"><i class="layui-icon layui-icon-delete"></i>删除</button>
                    </div>
                </div>
                </form>
            </div>

        </div>
    </div>
</div>
</div>
<input type="hidden" id="itemIds">
<script src="/public/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/public/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','layer','element','tree'], function() {
        var $ = layui.$
                , admin = layui.admin
                , element = layui.element
                , layer = layui.layer
                , tree = layui.tree
                , form = layui.form;
        var dataTest=${dataJson.raw()};

        //开启复选框
        tree.render({
            elem: '#resourceTree'
            ,data: dataTest
            ,showCheckbox: false
            ,id:"resourceTree"
            ,onlyIconControl:true //是否仅允许节点左侧图标控制展开收缩
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
               // layer.msg('状态：'+ obj.checked + '<br>节点数据：' + JSON.stringify(data));
                var itemIds=[];
                if (data.level==2){
                    itemIds.push(data.id);
                }else if(data.level==1){
                    itemIds.push(data.id);
                    if(data.children.length>0){
                        for(var i=0;i<data.children.length;i++){
                            itemIds.push(data.children[i].id);
                        }
                    }
                }else if (data.level==0){
                    itemIds.push(data.id);
                    if(data.children.length>0){
                        for(var i=0;i<data.children.length;i++){
                            itemIds.push(data.children[i].id);
                            if(data.children[i].children.length>0){
                                for (var j=0;j<data.children[i].children.length;j++){
                                    itemIds.push(data.children[i].children[j].id);
                                }
                            }
                        }
                    }
                }
                $("#itemIds").attr("value",itemIds.join(","));
                $.get("/item/getItem?id=" + data.id, function (result) {
                    if (result.code > 0) {
                        layer.msg(result.msg, {icon: 2});
                        return false;
                    } else {
                        $("#right").show();

                        $("#id").attr("value",result.data.id);
                        $("#parentId").attr("value",result.data.parentId);

                        var formElem = $('#myForm');
                        formElem.find('select[name="level"]').val(result.data.level);
                        form.render("select",'myForm');
                        if(result.data.level==2){
                            $("#addChildren").hide();
                        }else{
                            $("#addChildren").show();
                        }

                        $("#name").attr("value",result.data.name);
                        $("#style").attr("value",result.data.style);
                        $("#sequence").attr("value",result.data.sequence);
                        $("#itemHref").attr("value",result.data.itemHref);
                    }
                });

            }
        });


        /* 监听提交 */
        form.on('submit(component-form-demo1)', function(data){
            var data=data.field;

            $.post("/item/saveItem", data, function (result) {
                if (result.code > 0) {
                    layer.msg(result.msg);
                } else {
                    window.location.href = "/item/list";
                }
            });
            return false;

        });

        /* 监听删除 */
        form.on('submit(del)', function(data){

            layer.confirm('真的删除这个菜单么?如果存在子菜单也一并删除!', {icon: 7, title: '提示', skin: 'layui-layer-molv', anim: 4}, function (index) {
                layer.close(index);
                $.get("/item/deleteItem?id=" + $("#itemIds").val(), function (result) {
                    if (result.code > 0) {
                        layer.msg(result.msg, {icon: 2});
                        return false;
                    } else {
                        window.location.href = "/item/list";
                    }
                });
            });
            return false;

        });

        /* 添加子节点 */
        form.on('submit(addChildren)', function(data){
            var data=data.field;
            $("#id").attr("value",0);
            $("#addId").hide();
            $("#parentId").attr("value",data.id);
            var level = data.level;
            var formElem = $('#myForm');
            formElem.find('select[name="level"]').val(parseInt(level)+1);


            $("#name").attr("value","");
            $("#style").attr("value","");
            $("#sequence").attr("value","1");
            $("#itemHref").attr("value","");
            form.render("select",'myForm');
            return false;
        });

        /* 添加同级节点 */
        form.on('submit(addTj)', function(data){
            var data=data.field;
            $("#id").attr("value",0);
            $("#addId").hide();
            $("#parentId").attr("value",data.parentId);
            var level = data.level;
            var formElem = $('#myForm');
            formElem.find('select[name="level"]').val(parseInt(level));


            $("#name").attr("value","");
            $("#style").attr("value","");
            $("#sequence").attr("value",parseInt(data.sequence)+1);
            $("#itemHref").attr("value","");
            form.render("select",'myForm');
            return false;
        });


    });

</script>
</body>
</html>